<template>
    <el-table
      :data="tableData"
      border
      style="width: 80%; margin: 20px;border-radius: 8px;box-shadow: 5px 5px 10px rgba(98, 106, 239, 0.5);"
      :header-cell-style="{
          'background': '#626aef !important',
          'color': '#ffffff',
          'border': 'none !important'
        }">
      <el-table-column prop="name" label="提成项目" ></el-table-column>  
      <el-table-column prop="target1" label="条目一" width="150" />
      <el-table-column prop="inTarget1"  label="/￥" width="100" />
      <el-table-column prop="target2" label="条目二" width="150" />
      <el-table-column prop="inTarget2" label="/￥" width="100" />
      <el-table-column prop="result" label="结算/￥" width="100" />
    </el-table>
    <div style="width: 100%; float: left" v-show="!props.finish">
          <el-input
            v-model="opinionForm"
            type="textarea"
            placeholder="驳回意见,如审批通过无需填写"
            style="width: 500px; float: left;margin:20px;"
          />
        </div>
    <el-button type="primary" @click="submitForm" v-show="!props.finish" class="button" style="margin-left:20px;">审批通过</el-button>
    <el-button type="danger" @click="reject" v-show="!props.finish" class="button" style="margin-left:20px;">驳回</el-button>
</template>

<script  setup>
import {ref, onBeforeMount, reactive,getCurrentInstance} from "vue";
import {getOneKpiList}from '@/api/empKpi'
import {addKpi,rejectKpi} from "@/api/resultFourth"
import { ElMessage } from 'element-plus'

let props = defineProps({
  empId: {
    type: String,
    required: true, //是否规定必须得有
  },
  update: {
    type: Function,
    default: () => {},
  },
  thirdId:{
    type:Number,
    required:true
  },
  positionId:{
    type:Number,
    required:true
  },
  type:{
    type:Number,
    required:true
  },
  finish:{
    type:Boolean,
    required:true
  }
}) 
const opinionForm=ref("")
const tableData=ref([])
onBeforeMount(()=>{
  let empId=props.empId
  let positionId=props.positionId
    getOneKpiList({empId,positionId})
    .then(data=>{
        tableData.value=data.data;
    });
})

const submitForm = () => {
  let assessorId = JSON.parse(localStorage.getItem("userInfo")).id;
  let empId=props.empId
  let positionId=props.positionId
  let positionType=props.type
  addKpi({empId, assessorId, positionId, positionType})
  .then((data) => {
      if (data.code == 200) {
        ElMessage({
          message: "提交成功",
          type: "success",
        });
        props.update("kpi")
      } else {
        ElMessage.error("提交成功");
      }
    }
  );
};

const { proxy } = getCurrentInstance();
const goback=()=>{
  proxy.$router.go(-1)
}

const reject=()=>{
  let assessorId = JSON.parse(localStorage.getItem("userInfo")).id;
  let empId=props.empId
  let positionId=props.positionId
  let positionType=props.type
  let opinion=opinionForm.value
  rejectKpi({empId, assessorId, positionId, positionType,opinion }).then(data=>{
    if (data.code == 200) {
        ElMessage({
          message: "驳回成功",
          type: "success",
        });
        props.update("kpi")
        goback()
      } else {
        ElMessage.error("驳回失败");
      }
  })
}
</script>
<style scoped>
.button{
        width: 120px;
        height: 40px;
        margin: 10px 10px;
        float: left;
    }
</style>
